<template>
    <div>
    <v-form
          @submit="updateUser"
          :validation-schema="modiForm"
          v-slot="{ errors }"
          role="form"
          id="updateForm"
        >
          <div class="modal-body">
            <div class="form-group">
              <v-field
                class="form-control"
                name="userId"
                id="userId"
                readonly="true"
                type="hidden"
                :value="logUser.userId"
                required
              />
            </div>
            <div class="form-group">
              <label for="userName"> 用户名 </label>
              <v-field
                class="form-control"
                name="userName"
                id="userName"
                readonly="true"
                type="text"
                :value="logUser.userName"
                placeholder="请填写用户名"
                required
              />
              <div class="invalid-feedback">{{ errors.userName }}</div>
            </div>
            <div class="form-group">
              <label for="oldPass"> 原密码 </label>
              <v-field
                class="form-control"
                name="oldPass"
                id="oldPass"
                type="password"
                
                placeholder="请填写原密码"
                required
              />
            <div ref="oldPass" class="invalid-feedback">{{ errors.oldPass }}</div>
            </div>
            <div class="form-group">
              <label for="userPass"> 新密码 </label>
              <v-field
                class="form-control"
                name="userPass"
                id="userPass"
                type="password"
                placeholder="请填写密码"
                required
              />
              <div class="invalid-feedback">{{ errors.userPass }}</div>
            </div>
            <div class="form-group">
              <label for="userPass1"> 密码确认 </label>
              <v-field
                class="form-control"
                id="userPass1"
                name="userPass1"
                type="password"
                placeholder="请确认密码"
                required
              />
              <div class="invalid-feedback">{{ errors.userPass1 }}</div>
            </div>
            <div class="form-group">
              <label for="userAge"> 年龄</label>
              <v-field
                class="form-control"
                name="userAge"
                id="userAge"
                :value="logUser.userAge"
                type="number"
                placeholder="请填写年龄"
              />
              <div class="invalid-feedback">{{ errors.userAge }}</div>
            </div>
            <div class="form-group">
              <label for="userSex"> 性别 </label>
              <div class="radio">
                <label>
                  <v-field
                    type="radio"
                    name="userSex"
                    id="sex1"
                    value="0"
                    v-model="logUser.userSex"
                  />
                  男
                </label>
                <label>
                  <v-field type="radio" name="userSex"  v-model="logUser.userSex" id="sex2" value="1" /> 女
                </label>
                <div class="invalid-feedback">{{ errors.userSex }}</div>
              </div>
            </div>
            <div class="form-group">
              <label for="userEmail"> 邮箱</label>
              <v-field
                class="form-control"
                name="userEmail"
                id="userEmail"
                type="email"
                v-model="logUser.userEmail"
                placeholder="请填写邮箱"
              />
              <div class="invalid-feedback">{{ errors.userEmail }}</div>
            </div>
          </div>
          <div class="modal-footer">
            <button class="btn btn-primary" type="submit">更新</button>
            <button
              class="btn btn-default"
              ref="regclose"
              type="button"
              data-dismiss="modal"
            >
              取消
            </button>
          </div>
    </v-form>
    </div>
</template>
<script>

import {http} from '../../utils/http'
import { populateFormData,encrypt } from '../../utils/util';
import { Form, Field } from "vee-validate";
import * as Yup from "yup";
export default {
    components:{
        VForm: Form,
        VField: Field,
    },
    data() {
        return {
        logUser:{},
        modiForm: Yup.object().shape({
        userId:Yup.string().required("用编号不能为空"),
        userName: Yup.string().required("用户名不能为空"),
        oldPass: Yup.string()
          .required("密码不能为空"),
        userPass: Yup.string()
          .min(6, "密码长度不能少于6位")
          .required("密码不能为空"),
        userPass1: Yup.string()
          .oneOf([Yup.ref("userPass"), null], "两次输入密码不一致")
          .required("确认密码不能为空"),
         
        userAge: Yup.number().required("请输入年龄"),
        userSex: Yup.string().required("用户性别不能为空"),
        userEmail: Yup.string()
          .required("邮箱不能为空")
          .email("邮箱地址不合法"),
      }),
        }
    },
    methods: {
        updateUser(values) {
          console.log(values)
        let logonUser=sessionStorage.getItem('logonUser');
        let user=sessionStorage.getItem("user");
        if(logonUser!=null) logonUser=JSON.parse(logonUser);
        if(user!=null) user=JSON.parse(user);
        let enc=encrypt(values.oldPass,logonUser.key)
        console.log(enc,logonUser.userPass)
        if(logonUser.userPass!=enc){
            this.$refs.oldPass.innerHTTML="原密码不正确"
            return;
        }
        const params = populateFormData(values);
        http.post("/user/updateUser", params).then((resp) => {
            if (resp.data.code === 0) {
            this.$toast("恭喜用户信息更新成功");
            } else {
            this.$toast("更新用户信息失败");
            }
        });
        }
    },
        created() {
            let logUser=sessionStorage.getItem('user');
              console.log(logUser)
              if(logUser){
                this.logUser=JSON.parse(logUser);
          }
        },
}
</script>
<style scoped>
.invalid-feedback {
  color: red;
}
</style>